import React,{ memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import { getRecommendRankingAction } from "../../store/actionCreators";
import { RankingWrapper } from "./style";

import CJXThemeHeaderRcm from "@/components/theme-header-rcm";
import CJXTopRanking from "@/components/top-ranking"


export default memo(function CJXRecommendRanking () {

    let { upRanking, newRanking, originRanking } = useSelector((store) => {
        return {
            upRanking: store.getIn(["recommend", "upRanking"]),
            newRanking: store.getIn(["recommend", "newRanking"]),
            originRanking: store.getIn(["recommend", "originRanking"]),
        }
    }, shallowEqual);
    const dispatch = useDispatch();

    useEffect(() => {
        
        dispatch(getRecommendRankingAction(0));
        dispatch(getRecommendRankingAction(2));
        dispatch(getRecommendRankingAction(3));

    }, [dispatch]);

    return (
        <RankingWrapper>
            <CJXThemeHeaderRcm title="榜单" url="/discover/ranking"></CJXThemeHeaderRcm>
            <div className="tops">
                <CJXTopRanking info={upRanking}/>
                <CJXTopRanking info={newRanking}/>
                <CJXTopRanking info={originRanking}/>
            </div>
        </RankingWrapper>
    )
})